<template>
	<view class="mine-container">
		<!-- 个人信息区域 -->
		<view class="user-info" @tap="goToUserProfile">
			<view class="avatar-wrap">
				<image class="avatar" :src="userInfo.avatar || '/static/avatars/default-avatar.jpg'" />
			</view>
			<view class="info-text">
				<text class="nickname">{{userInfo.nickName}}</text>
				<text class="profile-status">点击完善资料</text>
			</view>
			<text class="arrow">></text>
		</view>

		<!-- 功能菜单区域 -->
		<view class="menu-grid">
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="handleMenuClick(item)">
				<image class="menu-icon" :src="item.icon" />
				<text class="menu-text">{{ item.text }}</text>
			</view>
		</view>

		<!-- 列表菜单 -->
		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in listItems" :key="index" @tap="handleItemClick(item)">
				<text class="item-text">{{ item.text }}</text>
				<text class="arrow">></text>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="bottom-buttons">
			<button class="invite-btn" open-type="share">邀请队长使用小程序</button>
			<button class="service-btn" open-type="contact">在线客服</button>
			<button class="logout-btn" v-if="userInfo.userId" @tap="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		logout
	} from '@/api/login.js'
	export default {
		name: 'MinePage',
		data() {
			return {
				userInfo: {},
				menuItems: [{
						icon: '/static/icons/wallet.png',
						text: '钱包',
						path: '/pages/wallet/index'
					},
					{
						icon: '/static/icons/bill.png',
						text: '交易',
						path: '/pages/wallet/transaction-list'
					},
					{
						icon: '/static/icons/venue.png',
						text: '球场订单',
						path: '/pages/order/list'
					},
					{
						icon: '/static/icons/member.png',
						text: '球场会员',
						path: ''
					},
					{
						icon: '/static/icons/history.png',
						text: '历史活动',
						path: '/pages/activity/history'
					},
					{
						icon: '/static/icons/friends.png',
						text: '球友',
						path: ''
					},
					{
						icon: '/static/icons/homepage.png',
						text: '个人主页',
						path: '/pages/profile/detail'
					},
					{
						icon: '/static/icons/template.png',
						text: '活动模版',
						path: '/pages/mine/templates/index'
					}
				],
				listItems: [{
						text: '接收公众号提醒'
					},
					{
						text: '黑名单',
						path: '/pages/mine/blacklist'
					},
					{
						text: '球场入驻'
					},
					{
						text: '关于菌子好球',
						path: '/pages/notice?id=1871908282696753154'
					}
				]
			}
		},
		onShow() {
			// 获取存储的用户信息
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data) {
				this.userInfo = storage_data.vuex_user_info
			}
		},
		methods: {
			// 跳转到个人资料页
			goToUserProfile() {
				if (this.userInfo && this.userInfo.userId) {
					uni.navigateTo({
						url: `/pages/profile/detail?userId=${this.userInfo.userId}`
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				}
			},
			logout() {
				logout().then(res => {
					console.log('logout', res)
					if (res.code === 200) {
						uni.showToast({
							duration: 500,
							icon: 'none',
							title: '退出成功'
						})
						this.searchTimer = setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login'
							})
						}, 500)
					}
				})
			},
			// 处理菜单点击
			handleMenuClick(item) {
				if (item.path) {
					if (item.text === '个人主页') {
						if (this.userInfo && this.userInfo.userId) {
							uni.navigateTo({
								url: `${item.path}?userId=${this.userInfo.userId}`
							})
						} else {
							uni.showToast({
								title: '请先登录',
								icon: 'none'
							})
						}
						return
					}
					uni.navigateTo({
						url: item.path
					})
				}
			},
			// 处理条目点击
			// 处理各种点击事件
			handleItemClick(item) {
				// 根据不同item处理不同跳转逻辑
				console.log('clicked:', item)
				if (item.text === '球场入驻') {
					uni.showModal({
						title: '球场入驻',
						content: '如果您想入住菌子好球小程序，请联系官方客服人员，微信号yudg,电话19156076698',
						showCancel: false,
						confirmText: '我知道了'
					})
				} else if (item.path) {
					uni.navigateTo({
						url: item.path
					})
				}
			},
			goToTemplates() {
				uni.navigateTo({
					url: '/pages/mine/templates/index'
				})
			}
		},
		// 分享设置
		onShareAppMessage() {
			return {
				title: '菌子好球 - 专业的球队管理工具',
				path: '/pages/index/index',
				imageUrl: '/static/avatars/default-avatar.jpg' // 分享图片，可选
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		min-height: 100vh;
		background-color: #f5f5f5;

		.user-info {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			margin-bottom: 20rpx;

			.avatar-wrap {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info-text {
				flex: 1;
				display: flex;
				flex-direction: column;

				.nickname {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.profile-status {
					font-size: 24rpx;
					color: #ff6b6b;
				}
			}

			.arrow {
				color: #999;
				font-size: 32rpx;
			}
		}

		.menu-grid {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;

			.menu-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;

				.menu-icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}

				.menu-text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}

		.menu-list {
			background: #fff;

			.menu-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1px solid #eee;

				.item-text {
					font-size: 28rpx;
					color: #333;
				}

				.arrow {
					color: #999;
					font-size: 32rpx;
				}
			}
		}

		.bottom-buttons {
			padding: 40rpx 30rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			button {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
			}

			.invite-btn {
				background: #ff6b6b;
				color: #fff;
			}

			.service-btn {
				background: #fff;
				color: #333;
			}

			.logout-btn {
				background-color: #ff6b35;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>